import {AtRate} from "taro-ui";
import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Image, RichText, Text, View} from "@tarojs/components";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {h5Wx} from "../../utils/h5.service";
import {beforeTime} from "../../utils/tools";
import {GOODS_EVALUATION_APP_LIST} from "../../constants/api";
import {user} from "../../utils/user.service";
import {http} from "../../utils/http";
import './index.scss'

export default class Index extends Component {
  state: {
    tableData: any
  } = {
    tableData: []
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
  }

  page = 1
  total
  length = 10

  async getData() {
    const {product_no = '', category, productId = ''} = Taro.getCurrentInstance().router.params
    const res = await http.HPost(GOODS_EVALUATION_APP_LIST, {
      page: this.page,
      size: 10,
      k: '',
      search_product_no: product_no,
      search_main_type: category,
      search_product_id: productId
    })
    this.total = res.recordsTotal
    return res.data
  }

  async onReachBottom() {
    if (this.page * 10 < this.total) {
      this.page++
      const newData = await this.getData()
      const oldData = this.state.tableData
      if (newData) {
        this.setState({tableData: [...oldData, ...newData]})
      }
    }
  }

  async componentDidShow() {
    this.page = 1
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 1500)
      return
    }
    const tableData = await this.getData()
    this.setState({tableData})
  }

  previewImage(urls, current) {
    Taro.previewImage({
      current: current, // 当前显示图片的http链接
      urls // 需要预览的图片http链接列表
    })
  }

  render() {
    const {tableData} = this.state
    return (
      <View className='evaluation-wrapper-common'>
        <GzhAuth />
        <View className='evaluation-wrapper-common-box'>
          {tableData && tableData.length > 0 && tableData.map(item => <View className='evaluation-item'>
            <View className='items'>
              <View className='evaluation-items'>
                <View className='items-left'>
                  <Image mode='aspectFill' src={item.photo} />
                  <View className='user-name'>
                    {item.is_anonymous == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ? '匿名' : item.nick_name}
                    {(process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.star && item.star > 0 && <View className='star'>
                      <AtRate
                        className={`star-rate ${process.env.TARO_ENV !== 'h5' ? 'star-rate-weapp' : ''}`}
                        value={Number(item.star)}
                        size={14}
                      />
                      <Text className='star-scores'>{item.star}分</Text>
                    </View>}
                  </View>
                </View>
                <View className='time'>{beforeTime(item.pub_date || item.add_date)}</View>
              </View>
              <View className='richText'>
                <RichText className='text' nodes={item.content} />
              </View>
              {item.resource_urls && <View className='content-box'>
                <View className='img-over'>
                  {item.resource_urls && item.resource_urls.map(urls =>
                    <Image mode='aspectFill' onClick={this.previewImage.bind(this,item.resource_urls, urls )}
                      className='image' src={urls}
                    />
                  )}
                  {item.resource_urls && item.resource_urls.length >= 3 && <View onClick={this.previewImage.bind(this,item.resource_urls, item.resource_urls )} className='img-preview-image'>图{item.resource_urls.length}</View>}
                </View>
              </View>}
            </View>
            <View className='through-line' />
          </View>)}
        </View>
      </View>
    )
  }
}
